<style lang="stylus">
.share-earn-point
  .slogan
    width 100%
    height 529px
    background url("../assets/mine/share.png")
    background-size cover
  .btn
    border-radius 6px
    background-color #5044bf
    line-height 80px
  .rule
    justify-content center
    &::before, &::after
      display block
      content ''
      background-color #000
      width 35%
      height 1px
    &::before
      margin-right 44px
    &::after
      margin-left 44px
  .hide
    display none
  .mint-popup img
    width 420px
    height 420px
</style>

<template lang="pug">
.share-earn-point
  title-bar(title="分享赚积分")
  .slogan
  .btn.white.fz-32.mgh-20.center.mgt-56(@click="onGetCode") 获取二维码
  .btn.white.fz-32.mgh-20.center.mgt-30.copy(@click="onCopyLink", :data="activityUrl") 复制活动链接
  .fz-28.center.fz-28.mgt-36.rule.flex 活动规则
  .fz-22.mgt-30.pdh-20(v-for="(remark, index) in remarks", :key="index") {{index + 1}}. {{remark}}
  popup(v-model="showCode")
    img(:src="qrCodeUrl")
</template>

<script>
import ClipboardJS from 'clipboard'
import { Popup } from 'mint-ui'
import TitleBar from '../components/TitleBar.vue'

export default {
  name: 'share-earn-point',
  components: { TitleBar, Popup },
  data() {
    return {
      activityUrl: '',
      showCode: false,
      remarks: [
        '在本页面复制邀请链接或二维码发送给微信或者QQ好友。',
        '好友使用链接下载注册成功后您将获得对应的金币',
        '在获取金币后您可以在APP兑换商城兑换VIP会员等特权'
      ]
    }
  },

  mounted() {
    this.$get('user/app/share', { uid: this.userId }).then(data => {
      this.activityUrl = data.url
    })
  },

  computed: {
    qrCodeUrl() {
      return `http://qr.liantu.com/api.php?text=${this.activityUrl}`
    }
  },

  methods: {
    onGetCode() {
      this.showCode = true
    },

    onCopyLink() {
      const clipboard = new ClipboardJS('.copy', {
        text(trigger) {
          return trigger.getAttribute('data')
        }
      })

      clipboard.on('success', () => {
        this.$toast('已复制')
      })
    }
  }
}
</script>
